﻿/*

            This file is part of the mojomo modular front end design framework for mojoPortal CMS; 
            find more at mojomo.co.uk or mojomo.codeplex.com	

Name:       typography.css

Author:     freshangle.co.uk

Version:    1.0

Purpose:    This css file addressses the site typography. This file handles the font sizes and line heights, 
            fonts.css is the place to declare your sites font stack and add custom fonts. 
            
            All font sizes cascade throughout the site except for the buttons which are set particularly, 
            see buttons.css
    
            pearsonified.com/typography/		get optimized font width height for content area 
  
            lamb.cc/typograph/					get a scale and rythm          

            drewish.com/tools/vertical-rhythm	generate enough css to adapt this template quickly   
    
    
            Typography set to base font/line height of 16/25px, but converted to ems and 
            composed to a scale of 48,32,28,24,21.3,18.7,16 px, optimised for a 580px/36.25em
            wide column.
    
            You can get pretty good results resizing from this table into the body and .oldie html 
            tags and adjusting the lineheight as appropriate.

                12px	0.750em	/ 75.0%	
                13px	0.813em	/ 81.3%
                14px	0.875em	/ 87.5%
                15px	0.938em	/ 93.8%
                16px	1.000em	/ 100.0%  

*/	



/* compose */	
  
   
        body    
        { 
        -webkit-font-smoothing: antialiased; 
        font-smoothing: antialiased; 
        text-rendering: optimizeLegibility; 
                                              
		font-size: 1em; /* 16px */
		line-height: 1.5625;/* 25px */	
        
        }

        /* keep text resizing sane in ie...*/                                 
        .oldie html { font-size: 100%; }        
        



		h1,h2,h3,h4,h5,h6 {margin:0 }   
 
		h1 { font-size: 3em; line-height: 1.0417; /* 48/50px */ margin-bottom: 0.5208em; }

		h2 { font-size: 2em; line-height: 1.5625; /* 32/50px */ margin-bottom: 0.7813em; }

		h3 { font-size: 1.75em; line-height: 1.7857em; /*28/50px */ margin-bottom: 0.8929em; }

		h4 { font-size: 1.5625em; line-height: 1.0417em;/* 24/25px */ margin-bottom: 1.0417em; }

		h5 { font-size: 1.3313em; line-height: 1.1737em; /* 21.3/25px */margin-bottom: 1.1737em; }

		h6 { font-size: 1.1688em; line-height: 1.3369em; margin-bottom: 1.3369em; }
        
        p {/*max-width:36.25em;*/text-align: left}  

		p, ul, blockquote, pre, td, th, label, q, address, hr, 
		samp, dl, ol, form,legend, table, fieldset, menu, 
		pre, code, kbd, samp, dialog, caption
		
		{ font-size: 1em; line-height:inherit; margin-bottom: 1.5625em;  }
		
		
/* harmonize  */			
		
		
		button, input, select, textarea 
		{ font-size: 1em; line-height:inherit; }						

		dl dd { margin-left: 1.5625em }		
		
		hr { margin: 1.5625em 0; border: 0}
		
		blockquote { padding-left: 1.5625em; border-left: 3px solid #ccc;}				
				
		tr, th, td { padding:0 0.75em; }
						
	
		
		
/* accents  */	
		

	
		dt { font-weight: 700 }
				
		em, blockquote, q { font-style: italic }
		blockquote > p { padding: 0 }

		cite, dfn { font-style: italic }		
		strong { font-weight: 700 }
		var, address { font-style: normal;  display: block; }
		ins, mark { text-decoration: none; }
		del { text-decoration: line-through }		
		abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

		code, pre 
		{  display: block; padding: 0.75em; border: 1px solid #ccc;}
	